<template>
	<view class="detailContainer" style="display: flex; flex-direction: column;justify-content: space-between;">
		<view class="topBox">
			<swiper indicator-dots class="swiper" indicator-color="#f2f2f2" indicator-active-color="#2c6cf4" :style="'height:'+height+'px'">
				<swiper-item v-for="(item, index) in info.images" :key="index">
					<image :src="item" class="slide-image" :style="'height:'+height+'px'"></image>
				</swiper-item>
			</swiper>
			<view class="textContainer">
				<view class="priceBox">
					<view class="price"><view class="text">价格</view> ￥{{info.price}}</view>
					<view class="name">{{info.name}}</view>
				</view>
				<view class="numBox">
					<view class="num">
						<view>规格</view>
						<view style="display: flex;align-items: center;width: 90%;flex-wrap: wrap;justify-content: flex-end;">
							<view v-for="(item,index) in info.skus" :key="index" @click="selectSku(item)" :class="skuActive === item.id?'skuActive':'skuItem'">
								{{item.name}}
							</view>
						</view>
					</view>
					<view class="num">
						<view>件数</view>
						<view style="display: flex;align-items: center;">
							<img @click="computingNum(1)" v-if="orderNum !== 0" style="width: 20px;height: 20px;" src="@/static/jian.png" alt="">
							<view v-if="orderNum !== 0" style="margin: 0 8px;color: #000;font-size: 13px;">{{orderNum}}</view>
							<img @click="computingNum(2)" style="width: 20px;height: 20px;" src="@/static/jia.png" alt="">
						</view>
					</view>
					<view class="desc">
						<view style="margin-right: 4px;white-space: nowrap;">服务：</view>
						<view>{{info.desc}}</view>
					</view>
				</view>
				<view class="detail">
					<view class="title">商品详情</view>
					<image v-for="(item,index) in info.desc_image" :key="index" :src="item" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="modal" v-if="showModal" @click="showModal = false">
			<view class="modalContainer" @click.stop>
				<view class="title">
					<view style="font-weight: bold;font-size: 14px;">已选商品</view>
					<view style="font-size: 12px;color: #c8c8c8;" @click="removeClick">清除已选商品</view>
				</view>
				<view class="goods">
					<scroll-view class="goodsScroll" scroll-y="true" >
						<view style="display: flex;flex-wrap: wrap-reverse;justify-content: space-between;">
							<view v-for="(item,index) in selectGoods" :key="index" class="goodsItem">
								<view style="display: flex;align-items: center;">
									<img style="width: 100rpx;height: 100rpx;margin-right: 10px;" :src="item.goodsImage" alt="" />
									<view class="itemName">
										<view style="margin-bottom: 5px;">{{item.name}}</view>
										<view style="margin-bottom: 5px;font-size: 12px;color: #999;">{{item.lowest.name}}</view>
										<view>￥{{item.price}}</view>
									</view>
								</view>
								<view class="addNum">
									<view style="display: flex;align-items: center;">
										<img @click="computingNumItem(item,1)" v-if="item.orderNum !== 0" style="width: 15px;height: 15px;" src="@/static/jian.png" alt="">
										<view v-if="item.orderNum !== 0" style="margin: 0 4px;color: #000;font-size: 12px;">{{item.orderNum}}</view>
										<img @click="computingNumItem(item,2)" style="width: 15px;height: 15px;" src="@/static/jia.png" alt="">
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="allPrice">
			<view class="carNum" @click="showModal = true">
				<view style="display: flex;align-items: center;">
					<button open-type="contact" type="default" class="kefuClass">
						<img style="width: 25px;height: 25px;margin-right: 7px;" src="@/static/kefu.png" alt="">
					</button>
					<img style="width: 30px;height: 25px;margin-right: 7px;" src="@/static/gouwu.png" alt="">
					<view class="position">{{getAllNum}}</view>
					<!-- <view>￥{{getAllPrice}}</view> -->
				</view>
			</view>
			<view style="display: flex;">
				<view class="priceButtonjia" @click="appendCard">加入购物车</view>
				<view class="priceButton" @click="nextOrder" style="margin-left: 10px;padding: 10px; text-align: center;">
					<view>立即下单￥{{showModal?getAllPrice:getSelectNum}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { commodityDetail } from '@/api/home.js'
	export default {
		data() {
			return {
				info:{
					skus:[]
				},
				infoWidth:300,
				orderNum: 0,
				showModal: false,
				skuActive:'',
				height:0,
				selectGoods:[],
				detailGoods:[],
			}
		},
		computed:{
			getSelectNum () {
				return (Number(this.info.lowest?.price) * Number(this.orderNum)).toFixed(2)
			},
			getAllNum () {
				return this.selectGoods.reduce(function (prev, cur, index, arr) {
				    return Number(prev) + cur.orderNum;
				},0);
			},
			getAllPrice () {
				return this.selectGoods.reduce((sum, current) => sum + (Number(current.lowest.price)*(current.orderNum)), 0)
			},
		},
		onShow() {
			let getWindowInfo = uni.getWindowInfo()
			this.height = getWindowInfo.screenWidth
			console.log(getWindowInfo.screenWidth);//屏幕宽度
			let cardList = uni.getStorageSync('card')?JSON.parse(uni.getStorageSync('card')):[]
			if(cardList.length>0){
				cardList.map(item=>{
					let findIndex = this.selectGoods.findIndex(demo=>{return demo.lowest.id === item.lowest.id})
					if(findIndex>=0){
						this.selectGoods[findIndex] = item
					}else{
						this.selectGoods.push(item)
					}
				})
			}else{
				this.selectGoods = []
			}
		},
		onLoad(options) {
			this.getDetail(options.id,options.ca_id)
		},
		methods:{
			removeClick(){
				this.selectGoods = []
				uni.removeStorageSync('card')
				this.showModal = false
				this.orderNum = 0
				this.info.skus.map(item=>{
					item.orderNum = 0
				})
			},
			selectSku(data) {
				this.orderNum = 0
				this.detailGoods = []
				if(data.orderNum) this.orderNum = data.orderNum
				this.info.lowest = data
				this.info.price = data.price
				this.skuActive = data.id
				this.computingNum(2)
			},
			getDetail(id,ca_id) {
				commodityDetail({commodityId: id}).then(res=>{
					 res.data.price = res.data.lowest.price
					 res.data.ca_id = ca_id
					 this.skuActive = res.data.lowest.id
					 res.data.goodsImage = res.data.images[0]
					 // this.orderNum = 1
					 this.info = res.data
					 this.computingNum(2)
					 // res.data.skus.map(item=>{
						//  item.orderNum = 1
						//  let findIndex = this.selectGoods.findIndex(demo=>{return demo.lowest.id === item.id})
						//  if(findIndex>=0){
						// 	 this.orderNum = this.selectGoods[findIndex].orderNum
						// 	 item.orderNum = this.selectGoods[findIndex].orderNum
						//  }
					 // })
					
				})
			},
			appendCard() {
				this.detailGoods.map(item=>{
					let flag = this.selectGoods.findIndex(demo=>{return demo.lowest.id === item.lowest.id})
					if(flag>=0) {
						this.selectGoods[flag].orderNum += item.orderNum
					}else{
						this.selectGoods.push(item)
					}
				})
				uni.showToast({
					title:"加入购物车成功",
					icon:'none'
				})
				uni.setStorageSync('card',JSON.stringify(this.selectGoods))
				uni.$emit('newList',JSON.stringify(this.selectGoods))
			},
			nextOrder() {
				let data = []
				if(this.showModal){
					if(!this.selectGoods.length-1 === 0) return uni.showToast({
						title: '请选择商品',
						icon:'none'
					})
					
					this.selectGoods.map(item=>{
						data.push({
							id: item.id,
							skuId: item.lowest.id,
							image:item.goodsImage,
							name: item.name,
							price: item.price,
							num: item.orderNum,
							ca_id:item.ca_id
						})
					})
				}else{
					if(!this.detailGoods.length-1 === 0) return uni.showToast({
						title: '请选择商品',
						icon:'none'
					})
					console.log(this.detailGoods)
					this.detailGoods.map(item=>{
						data.push({
							id: item.id,
							skuId: item.lowest.id,
							image:item.goodsImage,
							name: item.name,
							price: item.price,
							num: item.orderNum,
							ca_id:item.ca_id
						})
					})
				}
				
				uni.navigateTo({
					url:'/pages/submitted/index?data='+JSON.stringify(data)
				})
			},
			computingNumItem(item,type) {
				uni.setStorageSync('card',JSON.stringify(this.selectGoods))
				uni.$emit('newList',JSON.stringify(this.selectGoods))
				this.selectGoods.map(demo=>{
					if(demo.lowest.id === item.lowest.id) {
						if(type === 1 && item.orderNum >=0) item.orderNum -= 1
						if(type === 2) item.orderNum  += 1
					}
				})
				this.selectGoods.map((demo,index)=>{
					if(demo.orderNum <=0) this.selectGoods.splice(index,1)
				})
				uni.setStorageSync('card',JSON.stringify(this.selectGoods))
				uni.$emit('newList',JSON.stringify(this.selectGoods))
			},
			computingNum(type){
				let configInfo = JSON.parse(JSON.stringify(this.info))
				if(type === 1 && this.orderNum >=0) this.orderNum -= 1
				if(type === 2) this.orderNum  += 1
				console.log(this.skuActive,configInfo.skus)
				let findSku = configInfo.skus.findIndex(item=>{return item.id === this.skuActive})
				configInfo.orderNum = this.orderNum
				configInfo.lowest = configInfo.skus[findSku]
				let findGoods = this.detailGoods.findIndex(item=>{return item.lowest?.id === configInfo.lowest.id})
				if(findGoods >= 0){
					this.detailGoods[findGoods] = configInfo
				}else{
					this.detailGoods.push(configInfo)
				}
				// uni.setStorageSync('card',JSON.stringify(this.selectGoods))
				// let findGoods = this.selectGoods.findIndex(item=>{return item.lowest.id === configInfo.lowest.id})
				// if(findGoods >= 0){
				// 	this.selectGoods[findGoods] = configInfo
				// }else{
				// 	this.selectGoods.push(configInfo)
				// }
				// uni.setStorageSync('card',JSON.stringify(this.selectGoods))
			}
		}
	}
</script>

<style scoped lang="less">
	.kefuClass::after {
		border: none;
		height: 0!important;
	}
	.kefuClass {
		display: flex;
		align-items: center;
		position: relative;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		line-height: 1.35;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		color: #000;
		font-size: 14px;
		background-color: #fff;
		width: 32px;
		height: 100%;
	}
	::v-deep ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}
	.detailContainer{
		.bottomBox{
			height: 8vh;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			padding: 15px 20px 0;
			.priceBox{
				height: 36px;
				display: flex;
				align-items: center;
			}
			.priceButtonjia{
				padding: 8px 20px;
				border: 1px solid #2c6cf4;
				color: #2c6cf4;
				font-size: 14px;
				border-radius: 6px;
				height: 20px;
			}
			.priceButton{
				padding: 8px 20px;
				background-color: #2c6cf4;
				color: #fff;
				font-size: 14px;
				border-radius: 6px;
				height: 20px;
			}
		}
		.topBox{
			height: 90vh;
			overflow: hidden;
			overflow-y: auto;
			.swiper{
				height: 300px;
				.slide-image{
					width: 100%;
					height: 300px;
				}
			}
			.textContainer{
				padding: 10px;
				box-sizing: border-box;
				.detail{
					background-color: #fff;
					border-radius: 4px;
					padding: 20px;
					margin-top: 10px;
					.title{
						font-size: 12px;
						font-weight: bold;
						margin-bottom: 15px;
					}
					image{
						width: 100%;
					}
				}
				.numBox{
					background-color: #fff;
					border-radius: 4px;
					padding: 20px;
					margin-top: 10px;
					font-size: 12px;
					.num{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 10px;
						.skuActive{
							border: 1px solid #2c6cf4;
							border-radius: 4px;
							font-size: 12px;
							padding: 2px 10px;
							margin-left: 5px;
							// margin-bottom: 10px;
						}
						.skuItem{
							border: 1px solid #eee;
							border-radius: 4px;
							font-size: 12px;
							padding: 2px 10px;
							margin-left: 5px;
							// margin-bottom: 10px;
						}
					}
					.desc{
						display: flex;
						margin-top: 10px;
					}
				}
				.priceBox{
					background-color: #fff;
					border-radius: 4px;
					padding: 20px;
					.name{
						font-size: 14px;
						font-weight: bold;
						margin-top: 6px;
					}
					.price{
						font-size: 16px;
						font-weight: bold;
						display: flex;
						align-items: center;
						.text{
							margin-right: 5px;
							font-size: 12px;
							font-weight: initial;
						}
					}
				}
			}
		}
	}
	.modal{
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 100;
		background-color: rgba(0,0,0,0.3);
		height: 90vh;
		display: flex;
		align-items: flex-end;
		.modalContainer{
			background-color: #fff;
			width: 100%;
			padding: 15px;
			.title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 15px;
			}
			.goods{
				width: 100%;
				box-sizing: border-box;
				justify-content: space-between;
				background-color: #fff;
				display: flex;
				flex-wrap: wrap;
				.goodsScroll{
					height: 100%;
					.goodsItem:nth-last-child(0){
						border: 0;
						padding-bottom: 0;
					}
					.goodsItem{
						width: 100%;
						display: flex;
						font-size: 14px;
						margin: 10px 0;
						align-items: center;
						justify-content: space-between;
						border-bottom: 1px solid #f5f5f5;
						padding-bottom: 10px;
						.itemName{
							margin: 6px 0;
						}
						.addNum{
							display: flex;
							justify-content: space-between;
							align-items: center;
						}
					}
				}
			}
		}
	}
	.allPrice{
		height: 10vh;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1px solid #f5f5f5;
		background-color: #fff;
		padding: 0 20px 2vh;
		box-sizing: border-box;
		.carNum{
			display: flex;
			align-items: center;
			font-weight: bold;
			font-size: 16px;
			position: relative;
			.position{
				position: absolute;
				left: 87rpx;
				top: -18rpx;
				background:red;
				border-radius: 50%;
				width: 26px;
				height: 26px;
				line-height: 26px;
				transform: scale(.6);
				color: #fff;
				text-align: center;
				font-size: 16px;
			}
			img{
				margin-right: 5px;
			}
		}
		.priceButtonjia{
			padding: 8px 20px;
			border: 1px solid #2c6cf4;
			color: #2c6cf4;
			font-size: 14px;
			border-radius: 6px;
			height: 20px;
		}
		.priceButton{
			padding: 8px 20px;
			background-color: #2c6cf4;
			color: #fff;
			font-size: 14px;
			border-radius: 6px;
		}
	}
</style>